import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:graduation_project/common/global.dart';

class search_state_no extends StatefulWidget {
  // final change_search_state;
  const search_state_no({Key key, this.change_search_state}) : super(key: key);
  final ValueChanged<int> change_search_state;

  @override
  State<search_state_no> createState() => _search_state_noState();
}

class _search_state_noState extends State<search_state_no> {
  List<String> _history = [
    '永劫无间',
    '海贼王',
    '海贼王',
    '海贼王',
    '航海王',
  ];

  List _hot_search = [
    {
      'cartoon': 1007,
      'imageUrl':
          'https://nianyiman-1309342317.cos.ap-guangzhou.myqcloud.com/jianzi1%2C0.png',
      'name': '间谍过家家',
      'tage': '都市'
    },
    {
      'cartoon': 1005,
      'imageUrl':
          'https://nianyiman-1309342317.cos.ap-guangzhou.myqcloud.com/jianzi1%2C0.png',
      'name': '看不见的见子',
      'tage': '恐怖'
    },
    {
      'cartoon': 1004,
      'imageUrl':
          'https://nianyiman-1309342317.cos.ap-guangzhou.myqcloud.com/jianzi1%2C0.png',
      'name': '看不见的见子',
      'tage': '恐怖'
    },
    {
      'cartoon': 1003,
      'imageUrl':
          'https://nianyiman-1309342317.cos.ap-guangzhou.myqcloud.com/jianzi1%2C0.png',
      'name': '看不见的见子',
      'tage': '恐怖'
    },
    {
      'cartoon': 1002,
      'imageUrl':
          'https://nianyiman-1309342317.cos.ap-guangzhou.myqcloud.com/jianzi1%2C0.png',
      'name': '看不见的见子',
      'tage': '恐怖'
    },
    {
      'cartoon': 1001,
      'imageUrl':
          'https://nianyiman-1309342317.cos.ap-guangzhou.myqcloud.com/jianzi1%2C0.png',
      'name': '看不见的见子',
      'tage': '恐怖'
    },
  ];

  List _rank_colors = [
    Color.fromRGBO(205, 92, 92, 1),
    Color.fromRGBO(255, 165, 0, 1),
    Color.fromRGBO(255, 215, 0, 1),
    Colors.black38,
    Colors.black38,
    Colors.black38,
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      if (_history.length != 0)
        Container(
          child: Row(
            children: [
              Container(
                margin: EdgeInsets.only(left: 20),
                child: Text(
                  '历史记录',
                  style: TextStyle(fontSize: 12, color: Colors.black54),
                ),
              ),
              // 自动挤压
              Expanded(child: SizedBox()),
              IconButton(
                icon: Icon(
                  Icons.delete_outline,
                  color: Colors.grey,
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                          content: Text(
                            "确定清空全部历史记录？",
                            style: TextStyle(color: Colors.black),
                          ),
                          actions: <Widget>[
                            FlatButton(
                              onPressed: () {
                                setState(() {
                                  _history.clear();
                                  // Application.sp.remove("search_history");
                                  // 发送删除用户历史记录
                                });
                                Navigator.of(context).pop();
                              },
                              child: Text('确定'),
                              textColor: Colors.black54,
                            ),
                            FlatButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text(
                                '取消',
                                style: TextStyle(
                                    color: Color.fromRGBO(80, 200, 255, 1)),
                              ),
                              textColor: Colors.red,
                            ),
                          ],
                        );
                      });
                },
              )
            ],
          ),
        ),
      Wrap(
        spacing: 10,
        children: _history
            .map((v) => InkWell(
                  onTap: () {
                    search_value.text = v;
                    print(v);
                    setState(() {
                      search_state = 1;
                    });
                  },
                  child: Chip(
                    label: Text(
                      v,
                      // style: ,
                    ),
                    backgroundColor: Color(0xFFf2f2f2),
                  ),
                ))
            .toList(),
      ),
      Container(
        child: Row(
          children: [
            Container(
              margin: EdgeInsets.all(20),
              child: Text(
                '热门搜索',
                style: TextStyle(fontSize: 12, color: Colors.black54),
              ),
            ),
            Expanded(child: SizedBox()),
          ],
        ),
      ),
      Wrap(
        spacing: 10,
        children: _hot_search
            .asMap()
            .keys
            .map((v) => GestureDetector(
                  onTap: () {
                    // 跳转到动漫界面
                    print(v);
                  },
                  child: Container(
                      margin: EdgeInsets.only(bottom: 10),
                      // color: Colors.red,
                      height: 50,
                      width: 150,
                      child: Row(
                        children: [
                          Text(
                            (v + 1).toString(),
                            style: TextStyle(
                                color: _rank_colors[v],
                                fontSize: 18,
                                fontWeight: FontWeight.w900),
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 10),
                            height: 40,
                            width: 30,
                            child: Image(
                              fit: BoxFit.fill,
                              image: NetworkImage(
                                  _hot_search[v]['imageUrl'].toString()),
                              // image: ,
                            ),
                          ),
                          Column(
                            children: [
                              Container(
                                  margin: EdgeInsets.only(top: 8, left: 8),
                                  child: Text(_hot_search[v]['name'])),
                              Container(
                                  margin: EdgeInsets.only(left: 8),
                                  child: Text(_hot_search[v]['tage'])),
                            ],
                          )
                        ],
                      )),
                ))
            .toList(),
      ),
    ]);
  }
}
